<template>
    <div class="allStudent">
        <x-header :left-options="{showBack: true,backText:'全部学员'}" class="headerBox"></x-header>
        <div class="topBox">
            <div :class="index == 0 ? 'top_num1_box': index == 1 ? 'top_num2_box': 'top_num3_box'" v-for="(student, index) in students" :key="index" v-if="index < 3">
                <img :src="student.boxSrc"/>
                <img :src="student.headSrc"/>
                <div>{{student.name}}</div>
                <div>完成{{student.task}}个学习任务</div>
            </div>
        </div>

        <div class="topallBox">
            <div class="topall_list" v-for="(student, index2) in students" :key="index2" v-if="index2 > 2">
                <div>{{student.num}}</div>
                <img :src="student.headSrc" />
                <div>{{student.name}}</div>
                <div>完成{{student.task}}个学习任务</div>
            </div>

            <div class="topall_list topall_list_foot">
                <div>{{userNum}}</div>
                <img :src="userHeadSrc"/>
                <div class="topall_list_fotRight">
                    <div>{{userName}}</div>
                    <div>完成{{userTask}}个学习任务</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { XHeader  } from "vux";
    export default {
        components: {
            XHeader
        },
        data(){
            return{
                students: [
                    {
                        boxSrc: require('../assets/images/NO2x.png'),
                        headSrc: require('../assets/images/playback05.png'),
                        name: '李冰',
                        task: '42',
                    },
                    {
                        boxSrc: require('../assets/images/NO1x.png'),
                        headSrc: require('../assets/images/playback05.png'),
                        name: 'Candy',
                        task: '62',
                    },
                    {
                        boxSrc: require('../assets/images/NO3x.png'),
                        headSrc: require('../assets/images/playback05.png'),
                        name: '程浩',
                        task: '32',
                    },
                    {
                        num: '4',
                        headSrc: require('../assets/images/head54.png'),
                        name: '刘洋',
                        task: '36'
                    },
                    {
                        num: '5',
                        headSrc: require('../assets/images/head54.png'),
                        name: '刘洋',
                        task: '36'
                    },
                    {
                        num: '6',
                        headSrc: require('../assets/images/head54.png'),
                        name: '刘洋',
                        task: '36'
                    }
                ],
                    userNum: '36',
                    userHeadSrc: require('../assets/images/head03.png'),
                    userName: '我',
                    userTask: '3'
            }
        }
    }
</script>

<style lang="less" scoped>
.allStudent{
    /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
  }

    .topBox {
        margin-top: 30px;
        position: relative;
        height: 100%;
        display: flex;
        .top_num1_box {
            /* background-color: red; */
            width: 30%;
            text-align: center;
            &>img:nth-child(1) {
            height: 148px;
            width: 142px;
            margin-top: 60px;
            }
            &>img:nth-child(2) {
                position: absolute;
                top: 92px;
                left: 67px;
                width: 116px;
                height: 116px;
                border-radius: 50%;
                z-index: -1;
            }
            &>div:nth-child(3) {
                font: 600 35px "微软雅黑";
                margin: 20px;
            }
            &>div:nth-child(4) {
                color: #bababa;
                font-size: 22px;
                padding-bottom: 30px;
            }
        }
        .top_num2_box {
            /* background-color: blue; */
            width: 40%;
            position: relative;
            text-align: center;
            &>img:nth-child(1) {
                height: 190px;
                width: 180px;
                margin-top: 10px;
                z-index: 2;
                overflow: hidden
            }
            &>img:nth-child(2) {
                position: absolute;
                top: 51px;
                left: 91px;
                width: 146px;
                height: 146px;
                border-radius: 50%;
                z-index: -1;
            }
            &>div:nth-child(3) {
                font: 600 35px "微软雅黑";
                margin: 20px;
            }
            &>div:nth-child(4) {
                color: #bababa;
                font-size: 22px;
                padding-bottom: 30px;
            }
        }
        .top_num3_box {
            /* background-color: green; */
            width: 30%;
            position: relative;
            text-align: center;
            &>img:nth-child(1) {
                height: 138px;
                width: 130px;
                margin-top: 75px;
            }
            &>img:nth-child(2) {
                position: absolute;
                top: 105px;
                left: 69px;
                width: 106px;
                height: 106px;
                border-radius: 50%;
                z-index: -1;
            }
            &>div:nth-child(3) {
                font: 600 35px "微软雅黑";
                margin: 20px;
            }
            &>div:nth-child(4) {
                color: #bababa;
                font-size: 22px;
                padding-bottom: 30px;
            } 
        }
    }  

    .topallBox {
        border-top: 20px solid #f8f9fa;
        height: 100%;
        padding-bottom: 70px;
        .topall_list {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px 26px;
            border-bottom: 1px solid #eff0f0;
            &>div:nth-child(1) {
                color: #5f5f5f;
            }
            img {
                width: 92px;
                height: 92px;
                margin: 0 20px;
            }
            div:nth-child(3) {
                font-size: 32px;
            }
            div:nth-child(4) {
                font-size: 26px;
                color: #a3a3a5;
                margin-left: auto;
            }
        }
        .topall_list_foot {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #3E90FF;
            &>div:nth-child(1) {
                color: #000;
            }
            .topall_list_fotRight {
                color: #fff;
                margin-right: auto;
            }
        }
    }
    
    
    

}
</style>